<template>
  <div class="search">
    <div class="newText">流行搜索</div>
    <div class="seabox">
      <div class="a1">
        <div v-for="(item, index) in data1" class="aa">
          <span>{{ index + 1 }}</span>
          {{ item }}
          <span class="img"></span>
        </div>
      </div>
      <div class="a2">
        <div v-for="(item, index) in data2" class="aa">
          <span>{{ index + 6 }}</span>
          {{ item }}
          <span class="img"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: ["烤鱼烤箱", "鸡蛋豆腐", "八爪鱼", "油爆虾", "红薯粉"],
      data2: ["木耳菜", "鸭腿", "贝果", "冬瓜海带汤", "外貌协会"],
    };
  },
};
</script>

<style scoped="scoped">
.search {
  width: 300px;
  height: 195px;
  /* background-color: pink; */
  position: absolute;
  right: 21px;
  top: 605px;
}
.newText {
  font-size: 20px;
  font-weight: 700;
  color: #c0ae7d;
  margin-bottom: 10px;
}
.seabox {
  width: 300px;
  height: 155px;
  /* background-color: yellow; */
  display: flex;
}
.seabox .a1 {
  width: 150px;
  height: 155px;
}
.seabox .a2 {
  width: 150px;
  height: 155px;
}
.aa {
  font-size: 16px;
  margin: 8px;
  position: relative;
}
.aa:hover {
  color: orangered;
  cursor: pointer;
}
.aa span {
  width: 10px;
  display: inline-block;
  color: #909090;
  margin-right: 12px;
}
.aa .img {
  display: inline-block;
  background-image: url(../img/jinglingtu.png);
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0px;
  top: 7px;
}
</style>